<template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
    <div class="footer">
      <ul>
        <li v-for="item in footNav" @click="selectMapNav(item.title)" :key="item.id">
          <router-link :to='item.too'>
          <img :src="isSelect === item.title ? item.url1 : item.url" alt=""/>
          <p>{{item.title}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function () {
    return {
      footNav: [{title: '首页', url: 'http://huang.ngrok.xiaomiqiu.cn/api/qq.jpg', url1: 'http://huang.ngrok.xiaomiqiu.cn/api/qq.jpg', too: '/'},
        {title: '视频', url: 'http://huang.ngrok.xiaomiqiu.cn/api/ee.jpg', url1: 'http://huang.ngrok.xiaomiqiu.cn/api/ee.jpg', too: '/second'},
        {title: '资源', url: 'http://huang.ngrok.xiaomiqiu.cn/api/rr.jpg', url1: 'http://huang.ngrok.xiaomiqiu.cn/api/rr.jpg', too: '/love'},
        {title: '我的', url: 'http://huang.ngrok.xiaomiqiu.cn/api/ww.jpg', url1: 'http://huang.ngrok.xiaomiqiu.cn/api/ww.jpg', too: '/myhome'}]
    }
  },
  methods: {
    selectMapNav (title) {
      this.isSelect = title
    }
  }
}
</script>

<style lang="stylus" scoped>
  .footer ul
    width:100%
    height:50px
    position:fixed
    bottom:0
    z-index:1
    background-color:#fff
    display:flex
    li
      text-align:center
      flex: 1
      img
        height:23px
        width:23px
        margin-top:5px
        p
          font-size: 0.1rem
          height:15px
          line-height:10px
</style>
